import { defineComponent } from 'vue'

export default defineComponent({
  name: 'usuallyPlugin',
  setup () {
    return () => (
      <div class='contentCenter'>
        <div>
          <h3>常用插件</h3>
        </div>
        <div>
          <ul>
            <li>clean-webpack-plugin：编译前清理输出目录</li>
            <li>CopyWebpackPlugin：复制文件</li>
            <li>HotModuleReplacementPlugin：热更新</li>
            <li>ProvidePlugin：全局变量设置</li>
            <li>DefinePlugin：定义全局常量</li>
            <li>splitChunks（老版本用CommonsChunkPlugin）：提取公共模块，将符合引用次数的模块打包到一起</li>
            <li>mini-css-extract-plugin（老版本用ExtractTextWebpackPlugin）：css单独打包</li>
            <li>TerserPlugin（老版本用UglifyJsPlugin）：压缩代码</li>
            <li>progress-bar-webpack-plugin：编译进度条</li>
            <li>DllPlugin& DllReferencePlugin：提高打包效率，仅打包一次第三方模块</li>
            <li>webpack-bundle-analyzer：可视化的查看webpack打包出来的各个文件体积大小</li>
            <li>thread-loader,happypack：多进程编译，加快编译速度</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>

        <div className="code">
          代码压缩：将打包的js代码压缩，类似于常用的xxxx.min.js
          <div>npm i terser-webpack-plugin -D</div>

          <pre>
            ...<br />
            const TerserPlugin = require('terser-webpack-plugin');<br />
            <code>
              {` module.exports = {
            optimization: {
              minimizer: [  
                new TerserPlugin({
                  parallel: true,  //开启并行压缩，可以加快构建速度
                  sourceMap: true, //如果生产环境使用source-maps，则必须设置为true
                })
              ]
            }
          }
`}
            </code>
          </pre>
        </div>
      </div>
    )
  }
})